@charset "UTF-8";
@import "reset";

/*
    * @desc 购物车页面样式
    * @author 欧广烨
    * @date 2023-03-22
*/

/* 引入字体 */
@font-face {
    font-family: apple-font;
    src: url(../font/pingfang.ttf);
}

/* 购物车页样式 */
.cointainer {
    width: 100vw;
    text-align: center;
    background-color: #EAECED;
    font-family: apple-font;

    /* 标题样式 */
    .top-title {
        width: 100vw;
        height: 13.8667vw;
        padding: 3.7333vw 0  3.7333vw 4vw;
        box-sizing: border-box;
        border-bottom: .2667vw solid #CCC;
        background-color: #fff;

        h3 {
            text-align: left;
            font-size: 4.2667vw;
            line-height: 5.8667vw;

            i {
                margin-right: 37.1333vw;
                font-size: 4.2667vw;
            }
        }
    }

    /* 待付款商品 */
    .shopping-car {
        background-color: #fff;

        /* 商品图片 */
        img {
            width: 35.4133vw;
            height: 35.4133vw;
        }

        /* 商品状态详细 */
        .goods-t-b-p {
            height: 45.6vw;
            padding: 4vw 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            border-bottom: .2667vw solid #CCC;

            /* 商品勾选 */
            .select {
                input {
                    width: 3.4667vw;
                    height: 3.4667vw;
                    margin: 0 2.6667vw;
                }
            }

            /* 商品详细信息 */
            .detailed {
                margin-left: 2.6667vw;
                padding-bottom: .8vw;
                align-self: flex-end;
                text-align: left;

                /* 商品名称 */
                h3 {
                    font-size: 4.2667vw;
                    color: #333;
                    margin-bottom: 3.4667vw;
                }

                div {
                    margin-bottom: 2.1333vw;
                    span {
                        font-size: 3.7333vw;
                        color: #555;
                    }

                /* 市场价 */
                .market-value {
                        color: #ABABAB;
                        text-decoration: line-through;
                }

                /* 店铺价 */
                .store-price {
                    color: #F23C24;
                }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }

            }

        }
    }

    /* 猜你喜欢 */
    .guess-you-like {
        background-color: #f8f8f8;
        margin-top: 2.1333vw;
        overflow: hidden;

        /* 猜你喜欢标题 */
        .like-title {
            text-align: left;
            font-size: 4.6667vw;
            color: #555;
            margin: 4vw 0 4vw 4vw;
        }

        /* 商品列表样式 */
        .gue-y-l-goods {
            margin-left: 4vw;
            margin-bottom: 26.6667vw;

            /* 单个商品样式 */
            .goods {
                background-color: #fff;
                box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
                width: 44vw;
                height: 62.6667vw;
                margin-bottom: 2.6667vw;
                float: left;

                /* 每行第一个div设置右外边距 */
                &:nth-child(odd) {
                    margin-right: 2.6667vw;
                }

                /* 图片大小设置 */
                .goods-img {
                    img {
                        width: 44vw;
                    }
                }

                /* 猜我喜欢商品标题样式 */
                h3 {
                    text-align: left;
                    font-size: 3.7333vw;
                    color: #333;
                    margin-top: 5.0667vw;
                    padding-left: 2.6667vw;
                }

                /* 价格 */
                .price-sell {
                    width: 44vw;
                    margin-top: 2.1333vw;
                    padding-left: 2.1333vw;
                    box-sizing: border-box;
                    display: flex;

                    span {
                        font-size: 3.7333vw;
                        font-weight: 600;
                    }

                    span:nth-child(1),
                    span:nth-child(2) {
                        color: #F18474;
                    }

                    span:nth-child(2) {
                        padding-right: 11vw;
                    }

                    span:nth-child(3),
                    span:nth-child(4),
                    span:nth-child(5) {
                        font-size: 3.2vw;
                        font-weight: lighter;
                        color: #999;
                    }

                }

            }

            /* 解决浮动高度塌陷问题 */
            &::after {
                content: '';
                display: block;
                height: 0;
                visibility: hidden;
                clear: both;
            }
        }


    }

    /* 底部结算栏 */
    .settlement {
        width: 100vw;
        height: 13.3333vw;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;

        /* 总价 */
        .settl-price {
            font-size: 3.7333vw;
            margin-left: 4vw;

            span {
                color: #894E22;
            }
        }

        /* 结算按钮 */
        .settl-btn {
            button {
                width: 27.872vw;
                height: 13.3333vw;
                background-color: #894E22;
                font-family: apple-font;
                color: #fff;
                border: none;
                font-size: 3.7333vw;
            }
        }


    }
}